<template>
    <div class="boxs">
           <!-- <Header :params="params"></Header> -->
                <router-view class="body"></router-view>
        <ul class="ul">
            <router-link :to="data.path" v-for="(data,index) in list" :key="index" tag="LI" active-class="active">
                <!-- <img :src="data.activeImg" v-if="path == data.path" alt="">
                <img :src="data.img" v-else alt="">
                <span v-if="path == data.path" class="active">{{data.title}}</span> -->
                <van-icon size="0.4rem" :name="data.icon" />
                <span>{{data.title}}</span>
                </router-link>
        </ul>
    </div>
</template>
<script>
import Header from '@/components/Header'
import {mapState,mapMutations} from 'vuex'
export default {
    components:{
        Header
    },
    computed: {
        ...mapState({active:'active'})
    },
    mounted() {
        dd.biz.navigation.setRight({
            show: false, //控制按钮显示， true 显示， false 隐藏， 默认true
            })
        // console.log(this.active);
        if(this.active){
            this.path = this.active;
        }
    },
    methods: {
        ...mapMutations({changeActive:'changeActive'})
    },
    watch: {
        "$route"(newV,old){
            this.path = newV.path;
            this.changeActive(newV.path);
        },
        "path"(newV){
            if(newV == '/dashborad/home'){
                this.params.title = '教师工作平台'
            }else if(newV == '/dashborad/lesson'){
                 this.params.title = '课程'
            }else if(newV == '/dashborad/cycle'){
                 this.params.title = '教研圈'
            }else if(newV == '/dashborad/my'){
                 this.params.title = '我的'
            }
        }
    },
    data() {
        return {
            path:'/dashborad/home',
            params:{left:false,title:'教师工作平台'},
            list:[
                {title:'首页',img:'/img/shouye.png',icon:'wap-home-o',activeImg:'/img/shouye1.png',path:'/dashborad/home'},
                {title:'课程',img:'/img/kecheng.png',icon:'notes-o',activeImg:'/img/kecheng1.png',path:'/dashborad/lesson'},
                {title:'教研圈',img:'/img/jiaoyanquan.png',icon:'star-o',activeImg:'/img/jiaoyanquan1.png',path:'/dashborad/cycle'},
                {title:'我的',img:'/img/wode.png',icon:'contact',activeImg:'/img/wode1.png',path:'/dashborad/my'},
            ]
        }
    },
}
</script>
<style lang="scss" scoepd>
    .boxs{
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .body{
        flex: 1;
        overflow: auto;
    }
    .active{
        color:#2A9CFF;
    }
    .ul{
        display: flex;
        justify-content: space-around;
        border-top: 0.01rem solid #eee;
        li{
            display: flex;
            justify-content: center;
            flex-direction: column;
            font-size: 0.2rem;
            align-items: center;
            padding: 0.13rem 0;
            box-sizing: border-box;
            img{
                width: 0.46rem;
                height: 0.46rem;
            }
            span{
                margin-top: 0.1rem;
            }
        }
    }
</style>